<template>
  <div class="Post">
    <!-- 顶部标题 -->
    <top-title-bar>
      <template #left>
        <div class="left">
          <span class="iconfont icon-xiangzuo1" @click="$router.go(-1)"></span>
          <div class="sort">
            <van-dropdown-menu z-index="16">
              <van-dropdown-item v-model="sort_by" :options="sortList" />
            </van-dropdown-menu>
          </div>
        </div>
      </template>
      <template #right>
        <div class="right">
          <span
            class="iconfont icon-fangdajing"
            @click="
              $router.push('/SearchView?model=0&cat_id=' + $route.query.cat_id)
            "
          ></span>
          <span
            class="iconfont icon-xiaoxi"
            @click="$router.push('/MsgView')"
          ></span>
        </div>
      </template>
    </top-title-bar>

    <div class="wrap" v-if="postData">
      <main>
        <div class="icon-info">
          <div class="img"><img :src="postData.category.icon" alt="" /></div>

          <div class="info">
            <h1>{{ postData.category.title }}</h1>

            <p>
              热度 <span>{{ postData.category.viewCountFormated }}</span
              >话题 <span>{{ postData.category.postCountFormated }}</span>
            </p>

            <div class="icons">
              <div class="left">
                <div
                  class="icon"
                  v-for="user in postData.category.moderator"
                  :key="user.userID"
                >
                  <img :src="user.avatar" alt="" />
                </div>
              </div>

              <div class="more">
                <span class="iconfont icon-gengduo"></span>
              </div>
            </div>
          </div>
        </div>

        <div class="talent">
          <a
            href=""
            @click.prevent="
              $toast({
                message: '暂未开饭',
                icon: 'smile-o',
              })
            "
            ><span class="iconfont icon-xingji"></span> 达人堂</a
          >
          <a href="" @click.prevent="signInFun"
            ><span class="iconfont icon-qiandao"></span> 签到</a
          >
        </div>

        <div class="announce">
          <router-link
            v-for="item in postData.weightAndTopPost"
            :key="item.postID"
            tag="a"
            :to="'/PostDetails?postID=' + item.postID"
            class="text-ellipsis-1"
            ><em class="yellow" v-if="item.notice"><span>置顶</span></em
            ><em class="red" v-else-if="!item.notice"><span>公告</span></em>
            {{ item.title }}</router-link
          >
        </div>

        <div class="post-mag-box" ref="postMag">
          <van-tabs
            v-model="tag_id"
            animated
            sticky
            offset-top="50px"
            title-inactive-color="#646464"
            title-active-color="#37d279"
            color="#15c861"
            line-height="2px"
            line-width="20px"
            swipeable
            @change="tagToggleEvent"
          >
            <van-tab
              v-for="tag in postData.category.tags"
              :title="tag.name"
              :key="tag.ID"
            >
              <div class="body">
                <router-link
                  tag="div"
                  :to="'/PostDetails?postID=' + post.postID + '&from=技术分享'"
                  class="post-item-box"
                  v-for="post in postData.posts"
                  :key="post.postID"
                  v-show="
                    postData.category.tags[tag_id].ID == 0
                      ? true
                      : postData.category.tags[tag_id].ID == post.tagid
                  "
                >
                  <!-- 没有图片 -->
                  <div
                    class="post-item none-pic"
                    v-if="post.images.length == 0"
                  >
                    <div class="text">
                      <div
                        class="title text-ellipsis-2"
                        v-html="HtmlToText(post.title)"
                      ></div>

                      <div class="content">
                        <span
                          class="text-ellipsis-2"
                          v-html="HtmlToText(post.detail)"
                        >
                        </span>
                      </div>

                      <div class="info">
                        <div class="left">
                          <div class="name">
                            <small>{{ post.user.nick }}</small>
                          </div>

                          <div class="time">
                            <small>{{ post.createTime | numToDate }}</small>
                          </div>
                        </div>

                        <div class="right">
                          <div class="seek">
                            <i></i
                            ><small class="iconfont icon-kanguo_S">{{
                              post.hit
                            }}</small>
                          </div>

                          <div class="msg">
                            <i></i
                            ><small class="iconfont icon-xiaoxi1">{{
                              post.commentCount
                            }}</small>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 只有一张图 -->
                  <div class="post-item one-pic" v-if="post.images.length == 1">
                    <div class="icon"><img :src="post.images[0]" alt="" /></div>

                    <div class="text">
                      <div
                        class="title text-ellipsis-1"
                        v-html="post.title"
                      ></div>

                      <div class="content">
                        <span class="text-ellipsis-3" v-html="post.detail">
                        </span>
                      </div>

                      <div class="info">
                        <div class="left">
                          <div class="name">
                            <small>{{ post.user.nick }}</small>
                          </div>

                          <div class="time">
                            <small>{{ post.createTime | numToDate }}</small>
                          </div>
                        </div>

                        <div class="right">
                          <div class="seek">
                            <i></i
                            ><small class="iconfont icon-kanguo_S">{{
                              post.hit
                            }}</small>
                          </div>

                          <div class="msg">
                            <i></i
                            ><small class="iconfont icon-xiaoxi1">{{
                              post.commentCount
                            }}</small>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 两张图以上 -->
                  <div class="post-item many-pic" v-if="post.images.length > 1">
                    <div class="text">
                      <div
                        class="title text-ellipsis-1"
                        v-html="post.title"
                      ></div>

                      <div class="content">
                        <span
                          class="text-ellipsis-3"
                          v-html="TextToTitle(HtmlToText(post.detail))"
                        >
                        </span>
                      </div>

                      <div class="imgs" v-if="post.images.length < 3">
                        <div
                          class="img"
                          v-for="img in post.images.length"
                          :key="img"
                        >
                          <img :src="post.images[img - 1]" alt="" />
                        </div>
                      </div>
                      <div class="imgs" v-if="post.images.length >= 3">
                        <div class="img" v-for="img in 3" :key="img">
                          <img :src="post.images[img - 1]" alt="" />
                        </div>
                        <b>{{ post.images.length }}图</b>
                      </div>

                      <div class="info">
                        <div class="left">
                          <div class="name">
                            <small>{{ post.user.nick }}</small>
                          </div>

                          <div class="time">
                            <small>{{ post.createTime | numToDate }}</small>
                          </div>
                        </div>

                        <div class="right">
                          <div class="seek">
                            <i></i
                            ><small class="iconfont icon-kanguo_S">{{
                              post.hit
                            }}</small>
                          </div>

                          <div class="msg">
                            <i></i
                            ><small class="iconfont icon-xiaoxi1">{{
                              post.commentCount
                            }}</small>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </router-link>
                <van-empty
                  v-show="
                    postData.posts.reduce(
                      (s, o) =>
                        postData.category.tags[tag_id].ID == 0 ||
                        postData.category.tags[tag_id].ID == o.tagid
                          ? s + 1
                          : s,
                      0
                    ) == 0
                  "
                  class="custom-image"
                  image="./img/empty.png"
                  description="去其他地方看看吧!"
                />
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </main>
    </div>

    <aside :class="{ edit: goTopVisible }">
      <span
        class="iconfont icon-bianji3"
        @click="
          $router.push(
            '/EditView?way=release&categoryID=' + postData.category.categoryID
          )
        "
      ></span>
      <span class="iconfont icon-xiazai-copy" @click="toTopFun"></span>
    </aside>
  </div>
</template>

<script>
import TopTitleBar from "../components/TopTitleBar.vue";
import { getPostJson } from "../assets/api/posts.js";
export default {
  data() {
    return {
      sort_by: 0,
      tag_id: 0,
      sortList: [
        { text: "按回复时间", value: 0 },
        { text: "按本版精华", value: 2 },
        { text: "按发布时间", value: 1 },
      ],

      postData: null,

      goTopVisible: true,
    };
  },
  methods: {
    async dataInit() {
      this.__WindowScrollEvent();
      await this.postDataInit(); //执行等待
      await this.checkPostUpdataInit(); // 最后执行
    },

    // 签到功能
    signInFun() {
      let gourdDate = JSON.parse(localStorage.getItem("gourdDate"));
      if (!gourdDate) gourdDate = { money: 0 };
      if (gourdDate.updateTime != new Date().getDate()) {
        gourdDate.money += 10000;
        gourdDate.updateTime = new Date().getDate();
        localStorage.setItem("gourdDate", JSON.stringify(gourdDate));
        this.$toast.success("签到成功 葫芦+10000");
      } else
        this.$toast({
          message: "今日已经签过到了",
          icon: "smile-o",
        });
    },

    // 检查贴子是否更新了 合并数据
    checkPostUpdataInit() {
      // 本地拿数据
      let postList = JSON.parse(localStorage.getItem("postList"));
      if (!postList) return console.log("本板块无更新");

      // 过滤出数据
      postList = postList.filter((item) =>
        this.postData.category.tags.some((obj) => obj.ID == item.tagid)
      );

      if (postList.length) {
        postList.forEach((item) => {
          this.postData.posts.push(item);
        });

        console.log(
          "本帖子有更新 postList =>",
          postList,
          "合并后数据 =>",
          this.postData.posts
        );
      } else console.log("本帖子无更新");
    },

    // 初始化帖子数据
    async postDataInit() {
      if (!this.$route.query.cat_id) return console.log("没有传参 无法显示");
      let cat_id = this.$route.query.cat_id;
      if (cat_id != 96) {
        console.clear();
        console.log(
          "得到参数 cat_id =>",
          cat_id,
          "数据不够用[[[重定向至 cat_id => 96]]]"
        );
        cat_id = 96;
      }

      let jsonData = await getPostJson();
      let data;
      if (this.sort_by == 0) data = jsonData.postCategoryListSortBy0;
      else if (this.sort_by == 2) data = jsonData.postCategoryListSortBy2;
      else if (this.sort_by == 1) data = jsonData.postCategoryListSortBy1;

      this.postData = data.find((item) => item.category.categoryID == cat_id);
      console.log("这是取到的数据 =>", this.postData);
    },

    // 滚轮监听
    __WindowScrollEvent() {
      ((_this) => {
        let oldTop = 0;
        window.onscroll = () => {
          let newTop = window.scrollY;
          if (newTop < oldTop && oldTop > 200) {
            console.log("向上滚动");
            _this.goTopVisible = false;
          } else {
            console.log("向下滚动");
            _this.goTopVisible = true;
          }
          oldTop = newTop;
        };
      })(this);
    },

    // 回到顶部方法
    toTopFun() {
      if (this.goTopVisible) return;
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },

    // html代码转成字符
    HtmlToText(html) {
      let text = html;
      text = text.split("<text>").join("");
      text = text.split("</text>").join("");
      text = text.split("<image>").join("");
      text = text.split("</image>").join("");
      return text;
    },

    // 将很长的字符只取第一句
    TextToTitle(text) {
      let title = text;
      let arr = [];
      if (text.indexOf(" ") != -1) arr.push(text.indexOf(" "));
      if (text.indexOf("，") != -1) arr.push(text.indexOf("，"));
      if (text.indexOf(".") != -1) arr.push(text.indexOf("."));
      if (text.indexOf("。") != -1) arr.push(text.indexOf("。"));
      if (text.indexOf("；") != -1) arr.push(text.indexOf("；"));
      if (text.indexOf(";") != -1) arr.push(text.indexOf(";"));

      if (!arr.length) return title;

      arr = arr.sort((a, b) => a - b);
      return text.substring(0, arr[0]);
    },

    // 标签切换滚动条至顶
    tagToggleEvent() {
      if (Math.abs(window.scrollY - this.$refs.postMag.offsetTop) < 55) return;
      let top = this.$refs.postMag.offsetTop;
      this.$nextTick(() => {
        window.scrollTo({
          top,
          behavior: "smooth",
        });
      });
    },
  },
  created() {
    this.dataInit();
  },
  beforeDestroy() {
    window.onscroll = null;
  },
  watch: {
    sort_by() {
      this.postDataInit();
    },
  },
  components: {
    TopTitleBar,
  },
  filters: {
    numToDate(val) {
      if (val > 1000000000) {
        let oldTime = parseInt(val);
        let newTime = new Date().getTime();
        let dTime = newTime - oldTime;
        if (dTime / 1000 < 60) return parseInt(dTime / 1000) + "秒前";
        else if (dTime / 1000 / 60 < 60)
          return parseInt(dTime / 1000 / 60) + "分前";
        else if (dTime / 1000 / 60 / 60 < 24)
          return parseInt(dTime / 1000 / 60 / 60) + "小时前";
        else if (dTime / 1000 / 60 / 60 / 24 < 30)
          return parseInt(dTime / 1000 / 60 / 60 / 24) + "天前";
        else if (dTime / 1000 / 60 / 60 / 24 / 30 < 12)
          return parseInt(dTime / 1000 / 60 / 60 / 24 / 30) + "月前";
        else return parseInt(dTime / 1000 / 60 / 60 / 24 / 30 / 12) + "年前";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.Post {
  min-height: 100%;
  background-color: #fff;
  .TopTitleBar {
    ::v-deep header {
      z-index: 160;
    }
    .left {
      display: flex;
      align-items: center;
      .icon-xiangzuo1 {
        font-weight: bold;
        color: #fff;
        font-size: 22px;
        margin-right: 4px;
      }
      .sort {
        ::v-deep .van-dropdown-menu {
          background-color: transparent;
          .van-dropdown-menu__bar {
            box-shadow: none;
            background-color: transparent;
            .van-dropdown-menu__title {
              color: #fff;
              &::after {
                opacity: 1;
                border-left-color: #fff;
                border-bottom-color: #fff;
              }
            }
          }
          .van-dropdown-item {
            .van-popup {
              display: flex;
              justify-content: space-around;
              .van-cell {
                padding: 0;
                display: flex;
                align-items: center;
                width: max-content;
                height: 50px;
                color: #969696;
                &.van-dropdown-item__option--active {
                  color: #15ca62;
                }
                .van-cell__value {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
    .right {
      display: flex;
      align-items: center;

      .icon-xiaoxi,
      .icon-fangdajing {
        font-weight: bold;
        color: #fff;
        font-size: 22px;
      }
      .icon-fangdajing {
        font-size: 24px;
        margin-right: 10px;
      }
    }
  }

  main {
    margin-top: 8px;
    margin-top: 0;
    padding: 0 12px;
    padding: 0;

    .box {
      background-color: rgba(255, 255, 255, 0.75);
      margin-bottom: 10px;
      padding: 8px;

      &:nth-child(1) {
        padding: 0;
      }

      .img {
        width: 83px;
        height: 83px;
        border-radius: 5px;
        overflow: hidden;
        margin-right: 8px;
      }
    }

    .name-icon {
      display: flex;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      padding: 0 13px;

      .icon {
        width: 61px;
        height: 61px;
        margin-right: 10px;

        img {
          position: relative;
          border-radius: 5px;
          bottom: 9px;
        }
      }

      h4 {
        height: 32px;
        line-height: 32px;
        color: #1c1c1c;
      }

      .level {
        height: 16px;
        line-height: 16px;
        text-align: center;
        color: #f4fefa;
        font-size: 12px;
        display: flex;
      }

      p {
        width: max-content;
        height: 16px;
        background-color: #12d364;
        border-radius: 4px;
        padding: 0 4px;

        span {
          display: inline-block;
          transform: scale(0.8);
        }

        &:last-child {
          background-color: #1dc8f0;
          margin-left: 5px;

          &::before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            background-size: cover;
            transform: scale(0.9);
            position: relative;
            top: 0;
          }
        }
      }

      .right {
        flex: 1;
      }

      .money {
        height: 22px;
        line-height: 22px;
        color: #656565;
        font-size: 12px;
        margin-top: 14px;

        span {
          color: #1e1e1e;
          margin-right: 5px;

          &:last-child {
            margin-left: 15px;
          }
        }
      }
    }

    .num {
      display: flex;
      flex-wrap: wrap;

      a {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        width: calc(100% / 3);
        text-align: center;
        height: 53px;
        font-size: 12px;
        position: relative;

        &::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          right: 0;
          width: 1px;
          height: 14px;
          background-color: #efefef;
        }

        &:nth-child(3n):after {
          content: none;
        }

        p {
          font-size: 14px;
          color: #000;
          margin-bottom: 4px;
        }

        small {
          color: #737373;
        }
      }
    }

    .head {
      h4 {
        height: 38px;
        line-height: 38px;
        color: #282828;
      }
    }

    .imgs {
      display: flex;
    }

    .info {
      p {
        height: 26px;
        line-height: 26px;
        margin-bottom: 3px;
        font-size: 14px;
        color: #868686;

        &:last-child {
          margin-bottom: 0;
        }

        span {
          color: #6a6a6a;
          margin-left: 12px;
        }
      }
    }

    .node-place {
      margin-top: 15px;
      padding-left: 4px;

      div {
        color: #1e1e1e;
        font-size: 15px;
        height: 33px;
        line-height: 33px;

        span {
          color: #00bf3f;
          margin-left: 11px;
        }
      }
    }

    .user {
      height: 70px;
      border-bottom: 1px solid #eaeaea;
      box-sizing: border-box;
      display: flex;
      padding: 12px;

      .icon {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        overflow: hidden;
      }

      .text {
        flex: 1;
        margin: 0 10px;
      }

      .name {
        height: 25px;
        line-height: 25px;
        font-size: 15px;
        margin-bottom: 2px;
        color: #343434;
      }

      .age {
        background-color: #1dc8f0;
        height: 16px;
        line-height: 16px;
        border-radius: 3px;
        width: max-content;
        color: #fff;
        padding: 0 4px;

        span {
          display: inline-block;
          transform: scale(0.7);
          margin-left: -4px;
        }

        &::before {
          content: "";
          display: inline-block;
          background-size: 10px 81px;
          width: 10px;
          height: 11px;
        }
      }

      p {
        display: block;
        width: 65px;
        height: 25px;
        box-sizing: border-box;
        border: 1px solid #bdbdbd;
        color: #bdbdbd;
        font-size: 12px;
        text-align: center;
        line-height: 25px;
        border-radius: 5px;
        align-self: center;
      }

      &.con {
        p {
          border-color: #0cc85c;
          color: #0cc85c;
        }
      }

      &.woman {
        .age {
          background-color: #f452a2;

          &::before {
            background-size: 10px 81px;
            width: 8px;
            height: 11px;
          }
        }
      }
    }

    .msg-item {
      display: flex;
      padding: 12px;
      border-bottom: 1px solid #e6e6e6;

      &:active {
        opacity: 0.9;
        box-shadow: 0 0 100px 0 inset rgba(0, 0, 0, 0.1);
      }

      .icon {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
      }

      .text {
        flex: 1;
        max-width: calc(100% - 56px);
        margin-left: 10px;
      }

      .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 2px;

        span {
          display: block;
          color: #343434;
          height: 22px;
          line-height: 22px;
          font-size: 15px;
        }

        small {
          font-size: 12px;
          color: #0cc85c;
        }
      }

      .age {
        background-color: #1dc8f0;
        height: 16px;
        line-height: 16px;
        border-radius: 3px;
        width: max-content;
        color: #fff;
        padding: 0 4px;

        span {
          display: block;
          font-size: 12px;
          display: flex;
          align-items: center;

          &::before {
            display: block;
            margin-right: 2px;
          }
        }
      }

      .woman {
        background-color: #f452a2;
      }

      .time {
        font-size: 12px;
        color: #bebebe;
        height: 28px;
        line-height: 28px;
        margin-bottom: 5px;
      }

      .reply {
        background-color: #f0f0f0;
        padding: 5px 10px;
        border-radius: 4px;

        h5 {
          font-weight: normal;
          color: #969696;
          height: 31px;
          line-height: 31px;
        }

        p {
          color: #646464;
          line-height: 20px;
          padding: 4px 0 5px;
          font-size: 15px;
        }
      }

      .content {
        color: #323232;
        line-height: 20px;
        margin: 11px 0;
        font-size: 15px;
      }

      .origin {
        border: 1px solid #e0e0e0;
      }
    }

    .post-item {
      padding: 13px 0;
      display: flex;
      border-bottom: 1px solid #dddddd;

      .icon {
        width: 91px;
        height: 91px;
        border-radius: 5px;
        overflow: hidden;
      }

      .text {
        flex: 1;
        margin-left: 8px;
      }

      .title {
        line-height: 21px;
        color: #0e0e0e;
        font-size: 15px;
        margin-bottom: 5px;
      }

      .content {
        height: 42px;
        line-height: 14px;
        color: #646464;
        font-size: 12px;
        margin-bottom: 11px;
      }

      .info {
        display: flex;
        justify-content: space-between;

        .name {
          small {
            color: #969696;
          }
        }

        .time {
          small {
            color: #cccccc;
          }
        }
      }

      .seek {
        i {
          content: "";
          display: inline-block;
          background-size: 69px 13px;
          width: 16px;
          height: 11px;
          position: relative;
          vertical-align: middle;
        }
      }

      .msg {
        margin-left: 5px;

        i {
          content: "";
          display: inline-block;
          background-size: 69px 13px;
          width: 13px;
          height: 13px;
          position: relative;
          vertical-align: middle;
        }
      }
    }

    & > div {
      display: block;
    }

    .icon-info {
      display: flex;
      padding: 12px;
      background-color: #fff;

      .img {
        width: 72px;
        height: 72px;
        border-radius: 5px;
        overflow: hidden;
        margin-right: 12px;
      }

      .info {
        flex: 1;

        h1 {
          height: 21px;
          line-height: 21px;
          font-size: 15px;
          color: #0e0e0e;
          margin: 0;
        }

        p {
          color: #969696;
          font-size: 12px;
          margin-bottom: 0;

          span {
            color: #14ca61;
            margin-right: 12px;
            margin-left: 0;
          }
        }
      }
    }

    .icons {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;
      }

      .icon {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 5px;
      }

      .more {
        background-size: 21px 5px;
        width: 21px;
        height: 5px;
        justify-items: flex-end;
      }
    }
  }

  .box {
    padding: 0 12px;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 74px;
      box-sizing: border-box;
      border-bottom: 1px solid #eaeaea;
      position: relative;
    }

    .img {
      width: 49px;
      height: 49px;
    }

    .title {
      width: calc(100% - 59px);
      box-sizing: border-box;
      padding-right: 25px;
      height: 49px;
      line-height: 49px;
      color: #3e3e3e;

      h4 {
        font-weight: normal;
      }
    }

    i {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 9px;
      height: 17px;
      background-size: cover;
    }
  }

  main .post-item .info .left,
  main .post-item .info .right {
    display: flex;
    font-size: 12px;
    height: 12px;
    line-height: 12px;
  }

  main .post-item .info .left small,
  main .post-item .info .right small {
    display: inline-block;
    transform: scale(0.9);
    color: #3e3e3e;
  }

  .talent {
    display: flex;
    background-color: #fafafa;
    height: 42px;
    align-items: center;
    box-sizing: border-box;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    background-color: #fff;

    a {
      display: block;
      flex: 1;
      height: 22px;
      line-height: 22px;
      text-align: center;
      border-right: 1px solid #f0f0f0;
      color: #969696;
      font-size: 14px;

      i {
        display: inline-block;
        background-size: 237px 42px;
        width: 22px;
        height: 22px;
        vertical-align: -5px;
        margin-right: 5px;
      }

      &:nth-child(2) {
        i {
          background-size: 237px 42px;
          width: 21px;
          height: 21px;
        }
      }
    }
  }

  .announce {
    padding: 0 12px;
    margin-bottom: 10px;
    background-color: #fff;

    a {
      display: block;
      width: 100%;
      font-size: 15px;
      color: #0e0e0e;
      height: 45px;
      line-height: 45px;
      border-bottom: 1px solid #dddddd;

      &:last-child {
        border-bottom-width: 0;
      }

      em {
        font-style: normal;
        display: inline-block;
        height: 14px;
        line-height: 14px;
        font-size: 12px;
        color: #fff;
        border-radius: 2px;
      }

      .red {
        background-color: #ff3e62;
      }

      .yellow {
        background-color: #fb9644;
      }

      span {
        display: inline-block;
        transform: scale(0.8);
        position: relative;
        bottom: 1px;
      }
    }
  }

  .post-mag-box {
    background-color: #fff;

    .head {
      display: flex;
      height: 42px;
      line-height: 42px;
      overflow-x: scroll;
      font-size: 15px;
      color: #646464;

      p {
        height: 42px;
        box-sizing: border-box;
        border-bottom: 1px solid #e0e0e0;
        white-space: nowrap;
        padding: 0 12px;
      }

      .con {
        color: #14ca61;
        position: relative;

        &::after {
          content: "";
          display: block;
          position: absolute;
          height: 2px;
          left: 0;
          right: 0;
          bottom: -1px;
          width: calc(100% - 24px);
          margin: auto;
          background-color: #0cc85c;
        }
      }

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      &::-webkit-scrollbar-thumb {
        width: 0;
        height: 0;
      }
    }

    .body {
      padding: 0 12px;
    }
  }

  aside {
    position: fixed;
    width: 43px;
    height: 43px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    bottom: 25px;
    right: 25px;
    border-radius: 50%;
    background-color: rgba(240, 255, 244, 0.9);
    box-shadow: 0px 1px 5px 0px rgba(182, 221, 198, 0.8);

    a {
      display: block;
      width: 23px;
      height: 21px;
    }
  }

  .wrap {
    padding-top: 0;
    padding-bottom: 0;
    main {
      margin-top: 0;
      .icon-info {
        .info {
          flex: none;
          width: calc(100% - 84px);
          &:active {
            box-shadow: 0 0 100px 0 inset rgba($color: #000000, $alpha: 0.2),
              0 0 10px 5px rgba($color: #000000, $alpha: 0.2);
            opacity: 0.8;
          }
        }
        .icons {
          width: 100%;
          overflow: hidden;

          .left {
            overflow-x: scroll;
            overflow-y: hidden;
            position: relative;
            &::-webkit-scrollbar {
              height: 2px;
            }
            &::-webkit-scrollbar-thumb {
              height: 2px;
              background-color: #15ca62;
            }
            .icon {
              flex-shrink: 0;
            }
          }
          .more {
            color: #969696;
            display: flex;
            align-items: center;
            padding-left: 5px;
            box-shadow: -6px 0px 5px -4px;
            width: 24px;
            height: 24px;
            .icon-gengduo {
              font-size: 24px;
            }
          }
        }
      }

      .talent {
        a {
          display: flex;
          align-items: center;
          justify-content: center;
          &:active {
            opacity: 0.9;
            box-shadow: 0 0 20px 0 inset rgba($color: #000000, $alpha: 0.2);
          }
          .icon-xingji,
          .icon-qiandao {
            font-size: 20px;
            display: block;
            margin-right: 5px;

            &.icon-qiandao {
              color: #ecc428;
            }
            &.icon-xingji {
              color: #f16596;
            }
          }
        }
      }

      .announce {
        a {
          &:active {
            opacity: 0.9;
            box-shadow: 0 0 46px 0 inset rgba($color: #000000, $alpha: 0.2);
          }
        }
      }
      .post-item {
        padding: 13px 0;
        display: flex;
        border-bottom: 1px solid #dddddd;

        .icon {
          width: 91px;
          height: 91px;
          border-radius: 5px;
          overflow: hidden;
        }

        .text {
          flex: 1;
          margin-left: 8px;
        }

        .title {
          line-height: 21px;
          color: #0e0e0e;
          font-size: 15px;
          margin-bottom: 5px;
        }

        .content {
          height: 42px;
          line-height: 14px;
          color: #646464;
          font-size: 12px;
          margin-bottom: 11px;
        }

        .info {
          display: flex;
          justify-content: space-between;

          .name {
            small {
              color: #969696;
            }
          }

          .time {
            small {
              color: #cccccc;
            }
          }
        }

        .seek {
          i {
            content: "";
            display: inline-block;
            background-size: 69px 13px;
            width: 16px;
            height: 11px;
            position: relative;
            vertical-align: middle;
          }
        }

        .msg {
          margin-left: 5px;

          i {
            content: "";
            display: inline-block;
            background-size: 69px 13px;
            width: 13px;
            height: 13px;
            position: relative;
            vertical-align: middle;
          }
        }
      }
      .post-mag-box {
        ::v-deep .van-sticky {
          border-bottom: 1px solid #dedede;
          .van-tabs__nav {
            padding-left: 12px;
            padding-right: 12px;
            .van-tab {
              padding: 0;
              margin-right: 25px;
              &:nth-last-child(2) {
                margin-right: 0;
              }
            }
          }
        }

        .body {
          padding: 0;
          .post-item-box {
            padding: 0 12px;

            &:active {
              opacity: 0.9;
              box-shadow: 0 0 100px 0 inset rgba($color: #000000, $alpha: 0.2);
            }

            &:last-child {
              .post-item {
                border-bottom-width: 0;
              }
            }

            .post-item {
              padding: 0 0 10px;
              border-bottom: 1px solid #dedede;

              .text {
                width: 100%;
                .title {
                  background-color: transparent;
                }
                .content {
                  height: 48px;
                  line-height: 16px;
                }
                .info {
                  .right {
                    .iconfont {
                      font-size: 12px;
                      &::before {
                        margin-right: 3px;
                      }
                    }
                  }
                }
              }

              // 只有一张图
              &.one-pic {
                padding-top: 8px;
                .content {
                  color: #646464;
                  margin-bottom: 7px;
                  .title {
                    padding-left: 0;
                    padding-right: 0;
                  }
                }
              }

              // 一张图都没
              &.none-pic {
                .text {
                  margin-left: 0;
                  width: 100%;
                  .title {
                    max-height: 42px;
                    padding: 0;
                    padding-top: 8px;
                  }
                  .content {
                    max-height: 28px;
                    height: auto;
                  }
                }
              }

              // 两张图以上
              &.many-pic {
                .text {
                  padding-top: 8px;
                  margin-left: 0;

                  .content {
                    height: auto;
                    max-height: 48px;
                  }

                  .imgs {
                    height: 110px;
                    border-radius: 5px;
                    display: flex;
                    overflow: hidden;
                    position: relative;
                    margin-bottom: 8px;
                    .img {
                      width: 110px;
                      height: 110px;
                      overflow: hidden;
                      border-radius: 5px;
                      margin-right: calc((100% - 330px) / 2);
                      &:nth-child(3) {
                        margin-right: 0;
                      }
                    }
                    b {
                      position: absolute;
                      right: 0;
                      bottom: 0;
                      font-size: 12px;
                      color: #fff;
                      width: max-content;
                      height: 18px;
                      line-height: 18px;
                      display: block;
                      padding: 0 4px;
                      background-color: rgba($color: #000000, $alpha: 0.2);
                      border-radius: 5px 0;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  aside {
    background-color: transparent;
    box-shadow: none;
    height: 96px;
    display: block;
    transition: all 0.3s ease;
    border-radius: 0;
    &.edit {
      height: 43px;
      .icon-xiazai-copy {
        opacity: 0;
      }
    }
    .icon-bianji3 {
      color: #16ca63;
      font-weight: bold;
      box-shadow: 0 0 43px inset #bfd5c8, 0px 1px 5px 0px rgb(182 221 198 / 80%);
      width: 43px;
      height: 43px;
      border-radius: 50%;
      font-size: 22px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .icon-xiazai-copy {
      margin-top: 10px;
      width: 43px;
      height: 43px;
      border-radius: 50%;
      color: #969696;
      box-shadow: 0 0 43px inset #bfd5c8, 0px 1px 5px 0px rgb(182 221 198 / 80%);
      font-weight: bold;
      font-size: 22px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s ease;
    }
  }
}
</style>